<template>
	<view class="register-container">
		<view class="register-header">Registration</view>
		<view class="register-form-content">
		  <view class="input-item flex align-center">
		    <view class="iconfont icon-user icon"></view>
		    <input v-model="loginForm.username" class="input" type="text" placeholder="Account" maxlength="30" />
		  </view>
			<view class="input-item flex align-center">
			  <view class="iconfont icon-code icon"></view>
			  <input v-model="loginForm.code" type="number" class="input" placeholder="Verification Code" maxlength="4" />
			</view>
		  <view class="input-item flex align-center">
		    <view class="iconfont icon-password icon"></view>
		    <input v-model="loginForm.password" type="password" class="input" placeholder="Password" maxlength="20" />
			</view>
		  <view class="action-btn">
		    <button @click="handleRegister" class="login-btn cu-btn block lg round">SIGN UP</button>
		  </view>
		</view>
	</view>
	<view class="to-login">
		Existing account to
		<text class="login" @click="handleBack">Login</text>
	</view>
</template>

<script setup>
	import { ref } from "vue";
	const loginForm=ref({
		username: "",
		password: "",
		code: ""
	});
	
	function handleRegister(){
		
	}
	
	function handleBack() {
	  uni.navigateBack()
	};
	
</script>

<style lang="scss" scoped>
  page {
		background:#fff;
  }
	.register-container{
		width: 100%;
		height: 100%;
		background:#fff;
		position: absolute;
		overflow: hidden;
		.register-header{
			margin: 60rpx auto;
			color: #222;
			font-size: 58rpx;
			text-align: center;
			font-weight: bold;
		}
		.register-form-content{
			text-align: center;
			margin: 125rpx auto 0;
			width: 80%;
			.login-btn {
				margin-top: 118rpx;
				height: 84rpx;
				width: 584.11rpx;
				height: 84.11rpx;
				background-image: linear-gradient(90deg, #FF6623 17%, #F22E40 91%);
				box-shadow: 0 11.68rpx 23.36rpx 0 #f632446e;
				border-radius: 54.91rpx;
				color: #fff;
			}
		
			.input-item {
				margin: 40rpx auto;
				height: 110rpx;
				border-bottom: 1rpx solid #F2F2F2;
				.icon {
					font-size: 52rpx;
					margin-left: 0;
					color: #888888;
				}
		
				.input {
					width: 100%;
					font-size: 32rpx;
					text-align: left;
					padding-left: 30rpx;
					color: #222;
					&::input-placeholder{
						
					}
				}
				
				.login-code {
					height: 38px;
					float: right;
				
					.login-code-img {
						height: 38px;
						position: absolute;
						margin-left: 10px;
						width: 200rpx;
					}
				}
			}
		}
	}
	.to-login{
		position: fixed;
		bottom: 123rpx;
		left: 82rpx;
		.login{
			font-weight: 600;
			font-size: 31.54rpx;
			color: #DE1C2E;
		}
	}
</style>
